<template>
  <transition name="el-zoom-in-center">
    <div class="jsbos-preview-main">
      <div class="jsbos-common-page-header">
        <el-page-header
          @back="goBack"
          :content="'【' + dataForm.fullName + '】考试数据'"
        />
        <div class="options">
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>

      <el-row type="flex" :gutter="15" class="row-bg" justify="space-between">
        <el-col :span="12" class="page-container-content">
          <h5 data-v-b280ca9a="">{{ dataForm.fullName }}</h5>
          <div class="other-info" data-v-b280ca9a="">
            <span data-v-b280ca9a="">{{
              dataForm.startDatetime + " 至 " + dataForm.endDatetime
            }}</span>
          </div>
        </el-col>
        <el-col :span="12" class="page-container-extraContent">
          <div class="page-container-extra" data-v-b280ca9a="">
            <div class="item" data-v-b280ca9a="">
              <div class="ant-statistic" data-v-b280ca9a="">
                <div class="ant-statistic-title">考试时间</div>
                <div class="ant-statistic-content">
                  <!----><span class="ant-statistic-content-value"
                    ><span class="ant-statistic-content-value-int">{{
                      dataForm.examLength
                    }}</span></span
                  ><span class="ant-statistic-content-suffix">分钟</span>
                </div>
              </div>
            </div>
            <div class="item" data-v-b280ca9a="">
              <div class="ant-statistic" data-v-b280ca9a="">
                <div class="ant-statistic-title">试卷总分</div>
                <div class="ant-statistic-content">
                  <!----><span class="ant-statistic-content-value"
                    ><span class="ant-statistic-content-value-int">{{
                      dataForm.score
                    }}</span></span
                  ><span class="ant-statistic-content-suffix">分</span>
                </div>
              </div>
            </div>
            <div class="item" data-v-b280ca9a="">
              <div class="ant-statistic" data-v-b280ca9a="">
                <div class="ant-statistic-title">及格分数</div>
                <div class="ant-statistic-content">
                  <!----><span class="ant-statistic-content-value"
                    ><span class="ant-statistic-content-value-int">{{
                      dataForm.passLine
                    }}</span></span
                  ><span class="ant-statistic-content-suffix">分</span>
                </div>
              </div>
            </div>
            <div class="item" data-v-b280ca9a="">
              <div class="ant-statistic" data-v-b280ca9a="">
                <div class="ant-statistic-title">通过/指派人数</div>
                <div class="ant-statistic-content">
                  <!----><span class="ant-statistic-content-value"
                    ><span class="ant-statistic-content-value-int">{{
                      dataForm.userCompleteCount
                    }}</span></span
                  ><span class="ant-statistic-content-suffix"
                    >/{{ dataForm.userCount }}</span
                  >
                </div>
              </div>
            </div>
            <div class="item" data-v-b280ca9a="">
              <div class="ant-statistic" data-v-b280ca9a="">
                <div class="ant-statistic-title">通过率</div>
                <div class="ant-statistic-content">
                  <!----><span class="ant-statistic-content-value"
                    ><span class="ant-statistic-content-value-int">{{
                      (
                        (dataForm.userCompleteCount / dataForm.userCount) *
                        100
                      ).toFixed(2)
                    }}</span></span
                  ><span class="ant-statistic-content-suffix">%</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="考试分析" name="first" v-if="false">
          <el-row :gutter="15" :style="{ margin: '0 auto', width: '100%' }">
            <el-col :span="24">
              <div style="padding-bottom: 10px">
                <el-input
                  v-model="query.name"
                  placeholder="请输入"
                  style="width: 200px; margin-right: 10px"
                  clearable
                ></el-input>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="search()"
                  >查询</el-button
                >
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="学员成绩" name="third">
          <el-row :gutter="15" :style="{ margin: '0 auto', width: '100%' }">
            <el-col :span="24">
              <div style="padding-bottom: 10px">
                <el-input
                  v-model="query.keyword"
                  placeholder="请输入"
                  style="width: 200px; margin-right: 10px"
                  clearable
                ></el-input>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="search()"
                  >查询</el-button
                >
              </div>
            </el-col>
            <el-col :span="24">
              <jsbos-table
                v-loading="listLoading"
                :data="examList"
                ref="jsbosTableRef"
                @sort-change="sortChange"
                style="height: 500px"
              >
                <el-table-column
                  prop="realName"
                  label="姓名"
                  width="100"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="account"
                  label="账户"
                  width="150"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="organizeName"
                  label="所属部门"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="positionName1"
                  label="岗位1"
                  width="100"
                  align="left"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.positionName != 0 ? scope.row.positionName : ""
                    }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="所有考试成绩（按时间顺序）"
                  width="300"
                  prop="examTaskList"
                  algin="center"
                >
                  <template slot-scope="scope">
                    【{{ scope.row.examTaskList.length || 0 }}次】
                    <template v-for="(item, index) in scope.row.examTaskList">
                      {{ item.myScore }}({{ item.submitTime }}),
                    </template>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="myScore"
                  label="考试成绩"
                  width="140"
                  align="center"
                >
                  <template slot-scope="scope">
                    {{ scope.row.myScore }}分
                  </template>
                </el-table-column>
                <el-table-column
                  label="考试状态"
                  width="100"
                  prop="enabledMark"
                  algin="center"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.enabledMark | dynamicText(enabledMarkOptions)
                    }}
                  </template>
                </el-table-column>
                <!--                <el-table-column-->
                <!--                  prop="startTime"-->
                <!--                  label="考试用时"-->
                <!--                  width="140"-->
                <!--                  align="center"-->
                <!--                >-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                  prop="startTime"-->
                <!--                  label="允许考试次数"-->
                <!--                  width="140"-->
                <!--                  align="center"-->
                <!--                >-->
                <!--                </el-table-column>-->

                <el-table-column
                  label="考试次数"
                  width="100"
                  prop="examTaskListCount"
                  algin="center"
                >
                  <template slot-scope="scope">
                    {{ scope.row.examTaskList.length || 0 }}
                  </template>
                </el-table-column>
              </jsbos-table>
              <pagination
                :total="total"
                :page.sync="listQuery.currentPage"
                :limit.sync="listQuery.pageSize"
                @pagination="initData"
              />
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="错题分析" name="second">
          <el-row :gutter="15" :style="{ margin: '0 auto', width: '100%' }">
            <el-col :span="24">
              <div style="padding-bottom: 10px">
                <el-input
                  v-model="query.keyword"
                  placeholder="请输入"
                  style="width: 200px; margin-right: 10px"
                  clearable
                ></el-input>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="getWrongQuestionList()"
                  >查询</el-button
                >
              </div>
            </el-col>
            <el-col :span="24">
              <jsbos-table
                v-loading="listLoading"
                :data="wrongQuestionList"
                ref="jsbosTableRef"
                @sort-change="sortChange"
                style="height: 500px"
              >
                <el-table-column
                  prop="questionType"
                  label="题型"
                  width="100"
                  align="left"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.questionType == 'selectTi'"
                      >单选题
                    </span>
                    <span v-if="scope.row.questionType == 'multiple'"
                      >多选题
                    </span>
                    <span v-if="scope.row.questionType == 'determine'"
                      >判断题
                    </span>
                    <span v-if="scope.row.questionType == 'blank'"
                      >填空题
                    </span>
                    <span v-if="scope.row.questionType == 'answers'"
                      >问答题
                    </span>
                  </template>
                </el-table-column>
                <el-table-column prop="title" label="题目" align="left">
                </el-table-column>
                <el-table-column
                  prop="questionLibraryName"
                  label="所属题库"
                  width="150"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="answeredNum"
                  label="答题人次"
                  width="80"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="wrongNum"
                  label="答错人次"
                  width="80"
                  align="center"
                >
                  <template slot-scope="scope">
                    {{ scope.row.wrongNum }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="myScore"
                  label="错误率"
                  width="80"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.answeredNum > 0">
                      {{
                        (
                          (scope.row.wrongNum / scope.row.answeredNum) *
                          100
                        ).toFixed(2)
                      }}%</span
                    >
                    <span v-else>0.00%</span>
                  </template>
                </el-table-column>
              </jsbos-table>
              <pagination
                :total="total"
                :page.sync="listQuery.currentPage"
                :limit.sync="listQuery.pageSize"
                @pagination="initData"
              />
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="消息通知" name="fourth" v-if="dataForm.evaluation">
          <el-row :gutter="15" :style="{ margin: '0 auto', width: '100%' }">
            <el-col :span="24">
              <div style="padding-bottom: 10px">
                <el-input
                  v-model="query.keyword"
                  placeholder="请输入"
                  style="width: 200px; margin-right: 10px"
                  clearable
                ></el-input>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="search()"
                  >查询</el-button
                >
              </div>
            </el-col>
            <el-col :span="24">
              <jsbos-table
                v-loading="listLoading"
                :data="list"
                ref="jsbosTableRef"
                @sort-change="sortChange"
              >
                <el-table-column
                  prop="realName"
                  label="姓名"
                  width="100"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="account"
                  label="账户"
                  width="150"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="organizeName"
                  label="所属部门"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="positionName"
                  label="岗位"
                  width="200"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="myStar"
                  label="评分"
                  width="150"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="starTime"
                  label="完成时间"
                  width="140"
                  align="center"
                >
                </el-table-column>
              </jsbos-table>
              <!--              <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"-->
              <!--                          @pagination="initData"/>-->
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import { getDetail } from "@/views/exam/api/manager";

export default {
  components: {},
  props: [],
  name: "ExamData",
  data() {
    return {
      activeName: "third",
      visible: false,
      loading: false,
      printBrowseVisible: false,
      printId: "",
      scopeJson: [],
      dataForm: {
        id: "",
        fullName: "",
        examPaperId: "",
        categoryId: "",
        startDatetime: "",
        endDatetime: "",
        examLength: 30,
        passLine: 60,
        description: "",
        certificateId: "",
        preventionQuestionRandomizes: 0,
        preventionItemRandomizes: 0,
        preventionToggleScreen: 30,
        preventionToggleScreenSecond: 30,
        preventionFace: 0,
        preventionIp: 0,
        preventionAddr: 0,
        examRepeat: 0,
        examRepeatType: "custom",
        examRepeatNum: 1,
        examAnswers: "custom",
        examOpen: 0,
        examSign: 0,
        examPass: 0,
        examCompletionGrading: 0,
        examEssayGrading: 0,
        learningPeriod: 1,
        learningCredit: 1,
        learningIntegral: 1,
        examScope: "custom",
        examinerUserIds: "",
        creatorUserId: "",
        creatorTime: "",
        enabledMark: "0",
      },
      activetnlqtg: "0",
      categoryProps: { children: "children", label: "fullName", value: "id" },
      scopeOptions: [
        { fullName: "全公司", id: "all" },
        { fullName: "仅创建人", id: "creator" },
        {
          fullName: "指定人员",
          id: "select",
        },
      ],
      evaluationOptions: [
        { fullName: "星评", id: "1" },
        { fullName: "评估表", id: "2" },
      ],
      preventionCheatOptions: [{ fullName: "开启", id: "1" }],
      lastModifyUserIdOptions: [{ fullName: "开启", id: "1" }],
      enabledMarkOptions: [
        { fullName: "不通过", id: "0" },
        { fullName: "已通过", id: "1" },
      ],
      query: {
        keyword: undefined,
        examId: undefined,
      },
      homeworkList: [],
      examList: [],
      list: [],
      wrongQuestionList: [], //错题分析
      listLoading: true,
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handleTabClick(tab, event) {
      if (tab.name == "first") {
        this.initData();
      }
      if (tab.name == "second") {
        this.getWrongQuestionList();
      }

      if (tab.name == "third") {
      }

      if (tab.name == "fourth") {
      }
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll;
      this.dataForm = _dataAll;
    },

    goBack() {
      this.$nextTick(() => {
        this.$emit("refresh");
      });
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.query.id = id;
      this.search();
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true;
          request({
            url: "/api/exam/TemsExam/data/" + this.dataForm.id,
            method: "get",
          }).then((res) => {
            this.dataInfo(res.data);
            this.loading = false;
          });
        }
      });
    },
    search() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      };
      this.initData();
    },
    initData() {
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
        examId: this.dataForm.id,
        menuId: this.menuId,
      };
      request({
        url: `/api/exam/TemsExam/getStudyExamDataList`,
        method: "post",
        data: _query,
      }).then((res) => {
        this.examList = res.data.list;
        this.total = res.data.pagination.total;
        this.listLoading = false;
      });
    },
    getWrongQuestionList() {
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
        examId: this.dataForm.id,
        menuId: this.menuId,
      };
      request({
        url: `/api/exam/TemsExam/getStudyExamWrongDataList`,
        method: "post",
        data: _query,
      }).then((res) => {
        this.wrongQuestionList = res.data.list;
        this.total = res.data.pagination.total;

        this.listLoading = false;
      });
    },
    sortChange({ column, prop, order }) {
      this.listQuery.sort = order == "ascending" ? "asc" : "desc";
      this.listQuery.sidx = !order ? "" : prop;
      this.initData();
    },
  },
};
</script>
<style>
.row-bg {
  padding: 16px 16px;
  background-color: #ffffff;
}

.page-container-content h5 {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  min-height: 25px;
  word-wrap: break-word;
  line-height: 25px;
  font-weight: 400;
  margin: 0;
}

.page-container-content .other-info {
  padding-top: 5px;
}

.page-container-content .other-info span {
  padding-right: 15px;
}

.page-container-content .conditions {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.page-container-content .conditions .label-box {
  display: flex;
  flex-wrap: wrap;
}

.page-container-content .conditions .label-box .label-item {
  margin-left: 10px;
  line-height: 21px;
}

page-container-extraContent {
  min-width: 242px;
  text-align: right;
}

.page-container-extraContent .page-container-extra {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.page-container-extraContent .page-container-extra .item {
  margin-left: 16px;
}

.page-container-extraContent .page-container-extra .item .ant-statistic {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
}

.page-container-extraContent
  .page-container-extra
  .item[data-v-b280ca9a]
  .ant-statistic-title {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 25px;
}

.page-container-extraContent
  .page-container-extra
  .item[data-v-b280ca9a]
  .ant-statistic-content {
  font-size: 18px;
  line-height: 22px;
  height: 22px;
  margin-top: 6px;
}

.page-container-extraContent
  .page-container-extra
  .item[data-v-b280ca9a]
  .ant-statistic-content-suffix {
  font-size: 14px;
  line-height: 20px;
  color: #666;
}

.page-container-content
  .el-checkbox__input.is-disabled.is-checked
  .el-checkbox__inner {
  background-color: #409eff;
  border-color: #409eff;
}

.page-container-content
  .el-checkbox__input.is-disabled.is-checked
  .el-checkbox__inner::after {
  color: #ffffff;
}

.page-container-content
  .el-checkbox__input.is-disabled
  + span.el-checkbox__label {
  color: #606266;
  cursor: not-allowed;
}
</style>
